<template>
  <div class="warehouseItem" :class="classList" :style="styleObj">
    {{ renderText }}
  </div>
</template>

<script setup>
import { ref } from "vue"
let props = defineProps({
  nodeId: {
    type: Number,
  },
  nodeName: {
    type: String,
  },
  column: {
    type: Number,
  },
  abilities: {
    type: Array,
  },
  crossNode: {
    type: Boolean,
  },
  direction: {
    type: String,
  },
  walkNode: {
    type: Boolean,
  },
  isFirstRow: {
    type: Boolean,
  },
})

let colorMapping = {
  SUB_ROAD: "#70ad47", // 子道
  MAIN_ROAD: "#ffff00", // 主道
  CHARGE: "#7030a0", // 充电
  OUTBOUND: "#f4b084", // 出
  INBOUND: "#5b9bd5", // 入
  EMPTY: "#fff",
}

let textMapping = {
  UP: "上",
  DOWN: "下",
  LEFT: "左",
  RIGHT: "右",
  SUB_ROAD: "子",
  MAIN_ROAD: "主",
  GOODS: "货",
  EMPTY: "E",
  OUTBOUND: "出",
  INBOUND: "入",
  CHARGE: "充",
}

function initClassList(column, isFirstRow) {
  let classList = []
  if (column === 0) classList.push("borderLeft")
  if (isFirstRow) classList.push("borderTop")
  return classList
}

function initStyle(abilities, colorMapping) {
  let color = "#fff"
  Object.keys(colorMapping).forEach((key) => {
    let value = colorMapping[key]
    if (abilities.includes(key)) color = value
  })
  return {
    backgroundColor: color,
  }
}

function initRenderText(abilities, textMapping) {
  let textList = []
  Object.keys(textMapping).forEach((key) => {
    let value = textMapping[key]
    if (abilities.includes(key)) textList.push(value)
  })
  return textList.join("")
}
let renderText = ref(initRenderText(props.abilities, textMapping))
let classList = ref(initClassList(props.column, props.isFirstRow))
let styleObj = ref(initStyle(props.abilities, colorMapping))
console.log("🚀 ~ styleObj:", styleObj)
</script>

<style scoped>
.warehouseItem {
  width: 100px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  /* color: aquamarine; */
  /* background-color: hotpink; */
  /* border: 1px solid #333; */
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
}
.borderTop {
  border-top: 1px solid #333;
}
.borderBottom {
  border-bottom: 1px solid #333;
}
.borderLeft {
  border-left: 1px solid #333;
}
.borderRight {
  border-right: 1px solid #333;
}
</style>
